<template>
    <div class="box">
      <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="orderId" label="订单ID" width="80" />
            <el-table-column prop="orderNo" label="订单编号" width="180" />
            <el-table-column prop="orderName" label="订单名称" width="180" />
            <el-table-column prop="orderAmount" label="订单金额" width="180" />
            <el-table-column prop="createTime" label="下单时间" width="180" />
            <el-table-column prop="orderStatus" label="订单状态" :formatter="formatStatus" width="180" />
            <el-table-column label="操作" />
        </el-table>
      </div>
      <div style="margin-top: 20px;">
        <el-pagination
            v-model:current-page="searchForm.pageNum"
            v-model:page-size="searchForm.pageSize"
            :page-sizes="[2, 4, 6, 8]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
      </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getOrderList } from '@/api/api'
import type { TableColumnCtx } from 'element-plus'

const tableData = ref([]);
const total = ref(0);

const searchForm = ref({
    pageNum: 1,
    pageSize: 4,
});

const loadList = () => {
    getOrderList(searchForm.value).then(res => {
        if(res.data.code == 200) {
            tableData.value = res.data.data.records;
            total.value = res.data.data.total;
        }
    })
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  searchForm.value.pageSize = val;
  loadList();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  searchForm.value.pageNum = val;
  loadList();
}

const formatStatus = (row: any, column: TableColumnCtx<any>) => {
  if(row.orderStatus == 0) {
    return '未支付';
  }
  else if(row.orderStatus == 1) {
    return '已支付';
  }
  else if(row.orderStatus == 2) {
    return '已退款';
  }
  else{
    return '未知';
  }
}

onMounted(() => {
    loadList();
});

</script>

<style scoped>

</style>